[Docs] API Auth panel UI overhaul#1080
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughAdds deselection handling to project selection: clearing the selected project resets state and replaces auth headers with Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryRedesigned the API authentication panel with a modern UI overhaul that replaces the native dropdown with a custom Popover-based project selector and introduces a tabbed interface to toggle between project selection and manual entry modes. Major changes:
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant AuthPanel
participant ProjectDropdown
participant Popover
participant APIContext
User->>AuthPanel: Open auth panel
AuthPanel->>AuthPanel: Check canUseProjectMode
alt Has projects
AuthPanel->>AuthPanel: Set authMode to 'project'
AuthPanel->>ProjectDropdown: Render dropdown
User->>ProjectDropdown: Click dropdown trigger
ProjectDropdown->>Popover: Open popover
Popover-->>User: Display project list
User->>ProjectDropdown: Select project
ProjectDropdown->>AuthPanel: onSelect(projectId)
AuthPanel->>AuthPanel: handleProjectSelect()
AuthPanel->>AuthPanel: Update headers with project info
AuthPanel->>APIContext: updateSharedHeaders()
AuthPanel->>AuthPanel: Trigger useEffect
AuthPanel->>User: getAuthJson()
User-->>AuthPanel: Return admin access token
AuthPanel->>APIContext: updateSharedHeaders() with token
APIContext-->>User: Ready to make API requests
else No projects
AuthPanel->>AuthPanel: Set authMode to 'manual'
User->>AuthPanel: Input headers manually
AuthPanel->>APIContext: updateSharedHeaders()
end
User->>AuthPanel: Toggle between modes
AuthPanel->>AuthPanel: setAuthMode('project' | 'manual')
|
Greptile's behavior is changing!From now on, if a review finishes with no comments, we will not post an additional "statistics" comment to confirm that our review found nothing to comment on. However, you can confirm that we reviewed your changes in the status check section. This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR". |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/src/components/api/auth-panel.tsx (2)
24-31: Remove unused type fields.The
hideWhenProjectSelectedandisSensitivefields inStackAuthHeaderFieldare no longer used anywhere in the code after the refactor. Consider removing them to keep the type definition clean.🔎 Proposed cleanup
type StackAuthHeaderField = { key: StackAuthHeaderKey, label: string, placeholder: string, required: boolean, - hideWhenProjectSelected?: boolean, - isSensitive?: boolean, };
172-189: Consider adding loading state or usingrunAsynchronouslyWithAlertfor better UX.When a project is selected, the admin access token is fetched asynchronously. During this time, the UI displays "Ready to make requests" (line 300), but the token might not be populated yet. If the fetch is slow or fails, users could attempt requests without valid authentication.
Consider either:
- Adding a loading state to indicate token fetching is in progress
- Using
runAsynchronouslyWithAlertinstead ofrunAsynchronouslyto show alerts on token fetch failuresBased on learnings, the codebase prefers
runAsynchronouslyWithAlertfrom@stackframe/stack-shared/dist/utils/promisesfor operations where users should be notified of failures.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/src/components/api/auth-panel.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Always add new E2E tests when changing the API or SDK interface
For blocking alerts and errors, never use toast; use alerts instead as they are less easily missed by the user
NEVER try-catch-all, NEVER void a promise, and NEVER .catch(console.error); use loading indicators and async callbacks instead, or use runAsynchronously/runAsynchronouslyWithAlert for error handling
Use ES6 maps instead of records wherever you can
Files:
docs/src/components/api/auth-panel.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,css}: Keep hover/click transitions snappy and fast; avoid fade-in delays on hover. Apply transitions after action completion instead, like smooth fade-out when hover ends
Use hover-exit transitions instead of hover-enter transitions; for example, use 'transition-colors hover:transition-none' instead of fade-in on hover
Files:
docs/src/components/api/auth-panel.tsx
{.env*,**/*.{ts,tsx,js}}
📄 CodeRabbit inference engine (AGENTS.md)
Prefix environment variables with STACK_ (or NEXT_PUBLIC_STACK_ if public) so changes are picked up by Turborepo and improves readability
Files:
docs/src/components/api/auth-panel.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-11T04:13:19.308Z
Learnt from: N2D4
Repo: stack-auth/stack-auth PR: 943
File: examples/convex/app/action/page.tsx:23-28
Timestamp: 2025-10-11T04:13:19.308Z
Learning: In the stack-auth codebase, use `runAsynchronouslyWithAlert` from `stackframe/stack-shared/dist/utils/promises` for async button click handlers and form submissions instead of manual try/catch blocks. This utility automatically handles errors and shows alerts to users.
Applied to files:
docs/src/components/api/auth-panel.tsx
🧬 Code graph analysis (1)
docs/src/components/api/auth-panel.tsx (1)
docs/src/components/icons.tsx (1)
ChevronDown(67-69)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (13)
- GitHub Check: Vercel Agent Review
- GitHub Check: E2E Tests (Node 22.x, Freestyle mock)
- GitHub Check: E2E Tests (Node 22.x, Freestyle prod)
- GitHub Check: setup-tests-with-custom-base-port
- GitHub Check: lint_and_build (latest)
- GitHub Check: build (22.x)
- GitHub Check: docker
- GitHub Check: restart-dev-and-test-with-custom-base-port
- GitHub Check: setup-tests
- GitHub Check: all-good
- GitHub Check: restart-dev-and-test
- GitHub Check: check_prisma_migrations (22.x)
- GitHub Check: build (22.x)
🔇 Additional comments (4)
docs/src/components/api/auth-panel.tsx (4)
48-120: LGTM! Clean implementation of project selection.The
ProjectDropdowncomponent is well-structured with proper accessibility (button roles, keyboard navigation through Popover), clean state management, and smooth transitions. The inclusion of a "clear selection" option improves UX.
196-215: LGTM! Solid project selection logic with defensive validation.The handler properly validates that the selected project exists before processing, clearly documents the coordination with the token-fetching effect (line 208 comment), and appropriately clears headers that aren't needed for admin authentication.
225-357: LGTM! Desktop UI implementation is polished and follows guidelines.The desktop panel uses proper absolute positioning, smooth transitions (duration-300 ease-out), and follows the codebase's hover-exit transition pattern. The mode toggle, error display, and status indicator provide clear user feedback. The conditional rendering based on
canUseProjectModehandles both authenticated and unauthenticated states elegantly.
360-495: LGTM! Excellent mobile implementation with proper safe-area handling.The mobile UI thoughtfully adapts the desktop design with appropriate typography scaling (text-base), improved touch targets, and—importantly—proper safe-area handling for notched devices using
env(safe-area-inset-top)andenv(safe-area-inset-bottom). The structural consistency with the desktop version aids maintainability while the mobile-specific adjustments (Done button, larger spacing) improve the mobile experience.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
2 participants
Updates the API Docs auth panel for a new look.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Style
✏️ Tip: You can customize this high-level summary in your review settings.